<!--
 * @Author: 哈兰德
 * @Description: 样式属性设置的组件
-->
<template>
  <div>
    <div style="margin-top: 10px" class="el-card__header">
      样式属性
    </div>
    <el-form
      label-position="right"
      style="margin-top: 10px"
      size="mini"
      label-width="70px"
      @submit.native.prevent
    >
      <el-form-item label="样式">
        <div>
          <span @click="changeShadow">
            <el-radio
              v-model="shadow"
              style="width: 80px"
              :label="0"
            >常规</el-radio>
          </span>
          <span @click="changeShadow">
            <el-radio v-model="shadow" :label="1">投影</el-radio>
          </span>
        </div>
        <div v-if="shadow === 1" class="shadow-block shaow-block-color-test">
          <div class="cell-color-opa">
            <div class="cell-input">
              <div class="colorPicker">
                <span style="padding-right: 3px">颜色</span>
                <el-color-picker
                  v-model="shadow_color"
                  color-format="rgb"
                  :show-alpha="true"
                  @change="changeColor"
                />
                <span class="reset-span" @click="resetColor">重置</span>
              </div>
            </div>
          </div>
          <div style="display: flex; margin-top: 10px">
            <div class="cell-input">
              <el-input
                v-model="shadow_x"
                style="width: 50px"
                @change="changex"
              />
              <span>X</span>
            </div>
            <div class="cell-input">
              <el-input
                v-model="shadow_y"
                style="width: 50px"
                @change="changey"
              />
              <span>Y</span>
            </div>
            <div class="cell-input">
              <el-input
                v-model="shadow_blur"
                style="width: 50px"
                @change="changeblur"
              />
              <span>模糊</span>
            </div>
            <div class="cell-input">
              <el-input
                v-model="shadow_spread"
                style="width: 50px"
                @change="changespread"
              />
              <span>扩展</span>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="倒角">
        <div>
          <span @click="changeRadius">
            <el-radio
              v-model="radius"
              style="width: 80px"
              :label="0"
            >直角</el-radio>
          </span>
          <span @click="changeRadius">
            <el-radio v-model="radius" :label="1">圆角</el-radio>
          </span>
        </div>
        <div v-if="radius === 1" class="shadow-block">
          <div>圆角（半径）</div>
          <div style="padding: 10px">
            <el-slider
              v-model="radius_value"
              show-input
              @change="changeRadiusValue"
            />
          </div>
        </div>
      </el-form-item>
      <el-form-item label="边距">
        <div style="margin-top: -5px; margin-left: 5px">
          <el-slider
            v-model="contentBorder"
            :max="30"
            show-input
            @change="changeContentBorder"
          />
        </div>
      </el-form-item>
      <el-form-item label="间隔">
        <div style="margin-top: -5px; margin-left: 5px">
          <el-slider
            v-model="imageGutter"
            :max="30"
            show-input
            @change="changeImageGutter"
          />
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import managerTool from '@/util/managerTool'
export default {
  name: 'StyleAtr',
  props: {
    selectedTemplate: {
      type: Object,
      default: () => {}
    },
    activityCode: {
      type: String,
      default: ''
    },
    moduleCode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      shadow: 0,
      shadow_color: 'rgba(110,127,150,0.13)',
      shadow_x: 0,
      shadow_y: 2,
      shadow_blur: 14,
      shadow_spread: 0,
      radius: 0,
      radius_value: 8,
      contentBorder: 0,
      imageGutter: 0,
    }
  },
  computed: {
    ...mapGetters('step', ['steps', 'stepsl']),
    ...mapGetters('main', ['selectedComponent', 'pageContent'])
  },
  watch: {
    'selectedComponent._id' () {
      this.fillDataToForm()
    },
    stepsl () {
      this.fillDataToForm()
    }
  },
  mounted () {
    this.fillDataToForm()
  },
  methods: {
    ...mapMutations('main', [
      'editComponent',
      'addComponentListItem',
      'removeComponentListField',
      'editComponentListItem',
      'updateChildListModelField'
    ]),
    ...mapMutations('step', ['stepsAdd1', 'stepLock']),
    fillDataToForm () {
      this.shadow = this.selectedComponent.shadow
      this.shadow_color = this.selectedComponent.shadow_color
      this.shadow_x = this.selectedComponent.shadow_x
      this.shadow_y = this.selectedComponent.shadow_y
      this.shadow_blur = this.selectedComponent.shadow_blur
      this.shadow_spread = this.selectedComponent.shadow_spread
      this.radius = this.selectedComponent.radius
      this.radius_value = this.selectedComponent.radius_value
      this.contentBorder = this.selectedComponent.contentBorder
      this.imageGutter = this.selectedComponent.imageGutter
    },
    editComponentFn (field, value) {
      this.editComponent({
        _id: this.selectedComponent._id,
        field: field,
        value: value
      })
    },
    changespread (v) {
      if (!managerTool.validationPositiveNum(v)) {
        this.$message.error('格式不正确，只能填写大于0的数字！')
        this.shadow_spread = 0
        return
      }
      this.editComponentFn('shadow_spread', v)
      this.$emit('addStep')
    },
    changeShadow () {
      setTimeout(() => {
        this.editComponentFn('shadow', this.shadow)
        this.$emit('addStep')
      }, 100)
    },
    changeblur (v) {
      if (!managerTool.validationPositiveNum(v)) {
        this.$message.error('格式不正确，只能填写大于0的数字！')
        this.shadow_blur = 14
        return
      }
      this.editComponentFn('shadow_blur', v)
      this.$emit('addStep')
    },
    changeColor (val) {
      this.editComponentFn('shadow_color', val)
    },
    resetColor () {
      this.shadow_color = '#6E7F96'
      this.changeColor('#6E7F96')
    },
    changex (v) {
      if (!managerTool.validationNum(v)) {
        this.$message.error('格式不正确，只能填写数字！')
        this.shadow_x = 0
        return
      }
      this.editComponentFn('shadow_x', v)
      this.$emit('addStep')
    },
    changey (v) {
      if (!managerTool.validationNum(v)) {
        this.$message.error('格式不正确，只能填写数字！')
        this.shadow_y = 2
        return
      }
      this.editComponentFn('shadow_y', v)
      this.$emit('addStep')
    },
    changeRadiusValue (v) {
      this.editComponentFn('radius_value', v)
      this.$emit('addStep')
    },
    changeContentBorder (v) {
      this.editComponentFn('contentBorder', v)
      if (this.selectedTemplate.id !== 1) {
        this.editComponentFn('swipeVisible', v)
        setTimeout(() => {
          this.editComponentFn('swipeVisible', true)
        }, 200)
      }
    },
    changeImageGutter (v) {
      this.editComponentFn('imageGutter', v)
      this.$emit('addStep')
    },
    changeRadius () {
      setTimeout(() => {
        this.editComponentFn('radius', this.radius)
        this.$emit('addStep')
      }, 100)
    },
  }
}
</script>

<style lang="less" scoped>
@import '../../index.less';
</style>